<template>
  <div>
    <el-form class="pad-t-15 form-diy">
      <el-form-item label="视频样式" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
          <el-radio v-model="details.componentVideoDTO.videoStyle" label="1">16:9</el-radio>
          <el-radio v-model="details.componentVideoDTO.videoStyle" label="2">4:3</el-radio>
          <el-radio v-model="details.componentVideoDTO.videoStyle" label="3">1:1</el-radio>
        </div>
      </el-form-item>
      <el-form-item label="视频封面" label-width="80px" class="none-mar-b">
        <div class="mar-l-12 mar-t-10">
          <el-upload class="avatar-uploader"
          action="/api/common/uploadFiles"
          accept="image/jpeg,image/gif,image/png,image/bmp"
          list-type="picture-card-s"
          :before-upload="beforeUploadPicture" name="files"
          v-loading="fileLoadingPicture"
          :data="token" :show-file-list="false" :on-success="handleUploadSuccessPicture">
            <img v-if="details.componentVideoDTO.videoImg" :src="details.componentVideoDTO.videoImg" width="148px" height="148px">
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </div>
        <div class="font-12 pad-l-10 mar-t--15 font-gray" v-if="details.componentVideoDTO.videoStyle == 1">请传16:9的图片</div>
        <div class="font-12 pad-l-10 mar-t--15 font-gray" v-if="details.componentVideoDTO.videoStyle == 2">请传4:3的图片</div>
        <div class="font-12 pad-l-10 mar-t--15 font-gray" v-if="details.componentVideoDTO.videoStyle == 3">请传1:1的图片</div>
      </el-form-item>
      <el-form-item label="选择视频" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex video-btn mar-l-12">
          <el-upload class="avatar-uploader"
          action="https://up-z0.qiniup.com/"
          accept="image/mp4"
          list-type="picture-card-s"
          :before-upload="beforeUpload" name="file"
          v-loading="fileLoading"
          :data="qiniuToken" :show-file-list="false" :on-success="handleUploadSuccess">
            <span v-if="details.componentVideoDTO.videoName" class="font-14 font-blue">{{ details.componentVideoDTO.videoName }}</span>
            <i v-else class="on-btn">上传视频</i>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>

</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'
  import { getQiniuToken } from '@/api/common/common'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {},
          formDTO: {},
          componentVideoDTO: {
            articleVideoId: '',
            articleDetailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          }
        },
        fileLoading: false,
        fileLoadingPicture: false,
        qiniuToken: {}
      }
    },
    // 初始化页面
    created() {
      const that = this
      this.resetDetails()
      this.details = this.details1
      this.details.componentVideoDTO.videoStyle = this.details1.componentVideoDTO.videoStyle.toString()
      this.details.upperLowerMargins = Number(this.details1.upperLowerMargins)
      this.details.sideMargin = Number(this.details1.sideMargin)
      this.token = { accessToken: getToken() }
      getQiniuToken().then(response => {
        if (response.isError) return
        that.qiniuToken = { token: response.data }
      })
      this.$bus.$on('resetDetailsVideo' + this.eventId, function(details) {
        that.details = details
        that.details.upperLowerMargins = Number(details.upperLowerMargins)
        that.details.sideMargin = Number(details.sideMargin)
      })
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file) {
        // const isAVI = file.type === 'video/avi'
        // const isMOV = file.type === 'video/quicktime'
        // const isRMVB = file.type === 'video/rmvb'
        // const isRM = file.type === 'video/rm'
        // const isFLV = file.type === 'video/flv'
        const isMP4 = file.type === 'video/mp4'
        // const is3GP = file.type === 'video/3gp'
        console.log(file)
        if (!isMP4) {
          this.$message.error('上传视频必须是MP4 格式!')
          this.fileLoading = false
          return
        }
        this.fileLoading = true
        return (isMP4)
      },
      handleUploadSuccess(res, file) {
        if (this.fileLoading) {
          if (!res.error) {
            this.fileLoading = false
            this.details.componentVideoDTO.videoName = file.name
            this.details.componentVideoDTO.videoUrl = this.getFileSpace() + '/' + res.key
            this.$bus.$emit('videoFormData' + this.eventId, this.details)
          } else {
            this.$message.error('上传出错：' + res.error)
          }
        }
      },
      beforeUploadPicture(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
          return
        }
        this.fileLoadingPicture = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccessPicture(res, file) {
        this.fileLoadingPicture = true
        if (res.code === 101) {
          this.fileLoadingPicture = false
          this.details.componentVideoDTO.videoImg = res.data[0]
          this.$bus.$emit('videoFormData' + this.eventId, this.details)
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {},
          formDTO: {},
          componentVideoDTO: {
            articleVideoId: '',
            articleDetailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          }
        }
      }
    }
  }
</script>
